<template>
  <div class="login-wrap">
    <div class="login-bg">
      <div>
        <div class="img_s"><img src="@/assets/logo1.png" alt=""></div>
      </div>
      <div style="font-size: 45px;font-family: 'KaiTi', sans-serif; font-weight: 600;">数据库审计与风险控制系统软件</div>
    </div>
    <div class="login-panel">
      <div class="login-container">
        <h2 class="welcome-text">欢迎登录</h2>
        <div class="login-form">
          <!-- <div class="login-mode">密码登录</div> -->
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
            <el-form-item prop="phone">
              <el-input
                v-model="loginForm.phone"
                placeholder="请输入用户名"
                type="text"
                tabindex="1"
                auto-complete="on"
                maxlength="11"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                :key="passwordType"
                ref="password"
                v-model="loginForm.password"
                class="pwd"
                :type="passwordType"
                placeholder="请输入登录密码"
                tabindex="2"
                auto-complete="on"
                show-password
                @keyup.enter.native="handleLogin"
              />
            </el-form-item>
            <!-- <el-form-item prop="captchaCode">
              <div class="graphic-verify-code">
                <el-input v-model="loginForm.captchaCode" type="number" class="flex" placeholder="请输入图形验证码" />
                <img :src="captchaInfo && captchaInfo.base_64_blog" alt class="img-code" @click="getCaptchaInfo">
              </div>
            </el-form-item> -->
            <!-- <div class="retrieve-pwd">
              <span class="pointer" />
              <span class="pointer" @click="retrievePwd">找回密码</span>
            </div> -->
            <button type="button" :loading="loading" class="login-btn" @click="handleLogin">登录</button>
          </el-form>
        </div>
      </div>
    </div>
    <!-- <bottom/> -->
  </div>
</template>
<script>
// import {
//   apiCaptcha,
//   apiVerifyCaptcha,
//   apiMenuList,
//   smsSend,
//   smsVerify,
//   smsResetPassword
// } from '@/api/user.js';
// import { setStore } from '@/utils/index';
import bottom from "@/layout/bottom.vue"
import {post} from "@/utils/http"

export default {
  name: 'Login',
  components: {
        bottom
    },
  data() {
    const validateUsername = (rule, value, callback) => {
      value = value.trim();
      if (value === '') {
        callback(new Error('请输入手机号'));
      } else if (!this.phoneReg.test(value)) {
        callback(new Error('请输入正确的手机号'));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      value = value.trim();
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    // const validateCaptchaCode = (rule, value, callback) => {
    //   value = value.trim();
    //   const codeReg = /^[0-9]{4}$/;
    //   if (value === '') {
    //     callback(new Error('请输入验证码'));
    //   } else if (!codeReg.test(value)) {
    //     callback(new Error('请输入正确的4位验证码'));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      phoneReg: /^1[3456789]\d{9}$/,
      loginForm: {
        phone: '',
        password: '',
        captchaCode: ''
      },
      loginRules: {
        phone: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        // captchaCode: [{ required: true, trigger: 'blur', validator: validateCaptchaCode }]
      },
    //   captchaInfo: null, // 图形验证码信息
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      agreed: false,
      next: false,
      verifyCodeTime: 0,
      timer: null,
      isGetcode: false,
      uuid: ''

    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  mounted() {
    // this.getCaptchaInfo();
  },
  methods: {
    pwdSwitch() {
      this.passwordType = this.passwordType === 'password' ? '' : 'password';
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    // // 获取图形验证码信息
    // getCaptchaInfo() {
    //   apiCaptcha().then(res => {
    //     this.captchaInfo = res.data;
    //   });
    // },
    // // 清除图形验证信息
    // clearCaptchInfo() {
    //   this.loginForm.captchaCode = '';
    //   this.getCaptchaInfo();
    // },
    handleLogin() {
      this.$refs.loginForm.validate(async valid => {
        if (valid) {
          console.log("yes")
          try {
            console.log("uuuu")
            this.loading = true;
            // await apiVerifyCaptcha({
            //   captcha_id: this.captchaInfo.captcha_id,
            //   code: this.loginForm.captchaCode
            // });
            post("/user/login", this.loginForm)
            .then(res=>{
              console.log(res)
              if( res.data.code == 0) {
                this.$router.push("/oa/audit");
              } else {
                this.$message.error(res.data.message);
              }
              console.log(res.data.data.user_info.is_manager)
              this.$store.commit("user/SET_USERID", res.data.data.user_info.id);//在store/modules/system.js里面找到对应的数据
              this.$store.commit("user/SET_ROLEID", res.data.data.user_info.role);
              this.$store.commit("user/SET_USERINFO", res.data.data.user_info);
              this.$store.commit("user/SET_MANAGETYPE", res.data.data.user_info.is_manager);
            })
          } catch (e) {
            // this.clearCaptchInfo();
          } finally {
            this.loading = false;
          }
        }
      });
    },
  }
};
</script>
<style lang="less" scoped>
.login-wrap {
  height: 100%;
  width: 100%;
  background: url("../../assets/login_bg.jpg") no-repeat center center;
  background-size: cover;
  background-attachment:fixed;
  position:absolute;
  left:0;
  top:0;
  .login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .login-bg {
    height: 116px;
    padding: 40px 0 0 200px;
    display: flex;
    align-items: center;
    div {
      display: flex;
      align-items: center;
      .img_s{
        margin: 0 50px;
        img {height: 64px;}
      }
      .img_com{
        img {height: 40px;}
      }
    }
    .sub-title {
      margin-top: 10px;
      font-size: 30px;
      line-height: 64px;
      font-weight: 400;
      color: #666;
    }
  }
  
  .login-container {
    background: #ffffff;
    width: 60%;
    min-width: 440px;
    max-width: 580px;
    box-shadow: 0px 0px 91px 7px rgba(229, 241, 255, 0.59);
    border-radius: 20px;
    margin-top: 100px;
    .welcome-text {
      font-size: 32px;
      margin-left: 40px;
      font-weight: normal;
      line-height: 80px;
      color: #000000;
      padding: 30px 0 10px 0;
    }
    .header {
      padding-top: 94px;
      margin-left: 194px;
      display: flex;
      .logo {
        height: 60px;
      }
    }
    .login-form {
      width: 75%;
      margin: 0 auto;
      padding-bottom: 50px;
      .login-mode {
        color: #000000;
        position: relative;
        height: 44px;
        line-height: 42px;
        cursor: pointer;
        display: inline-block;
        margin-bottom: 16px;
        &::before {
          content: "";
          width: 30px;
          height: 5px;
          background: #4c73fe;
          border-radius: 3px;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
        }
      }
      .pwd {
        .el-input__inner {
          padding-right: 40px;
        }
      }
      .graphic-verify-code {
        display: flex;
        align-items: center;
        height: 100%;
        .el-input {
          input::-webkit-outer-spin-button,
          input::-webkit-inner-spin-button {
            -webkit-appearance: none;
          }
        }
        .img-code {
          height: 36px;
          width: 82px;
          cursor: pointer;
          line-height: 40px;
          border: 1px solid #000;
          margin-left: 10px;
          border-radius: 2px;
        }
      }

      .login-btn {
        width: 100%;
        height: 46px;
        background: #4c73fe;
        border-radius: 34px;
        border: none;
        color: #ffffff;
        font-size: 16px;
        cursor: pointer;
        display: block;
        margin-top: 40px;
      }
    }
  }
  ::v-deep {
    .login-form {
      .el-input__inner {
        width: 100%;
        height: 46px;
        border: none;
        border-radius: 10px;
        font-size: 14px;
        background: #f7f8fa;
        &::placeholder {
          color: #333333;
          font-size: 14px;
        }
      }
      .el-input {
        flex: 1;
      }
      .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
        background-color: #409EFF;
        border-color: #409EFF;
      }
      .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
        border-color: #ffffff;
      }
    }
  }

  .record-no-text {
    width: 50%;
    position: absolute;
    left: 50%;
    bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    a {
      display: flex;
      align-items: center;
      text-decoration: none;
      line-height: 20px;
      &:last-child{
        margin-left: 30px;
      }
      
      .record-text {
        margin-left: 5px;
        color: #999;
        font-size: 16px;
        white-space: nowrap;
        &:hover {
          color: #1a60c7;
        }
      }
    }
  }
}

.mask-wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

@media screen and (max-width: 860px) {
  .login-bg{
    display: none;
  }
  .login-panel{
    width: 100% !important; 
    .login-container{
      min-width: 320px !important;
      width: 90%;
      max-width: 480px !important;
    }
  }
  .record-no-text{
    display: none !important;
  }
}
@media screen and (max-width: 1500px) {
  .login-bg {
    .title {
      font-size: 40px !important;
    }
    .sub-title {
      font-size: 48px !important;
    }
  }
}
@media screen and (min-width: 1921px) {
  .login-bg {
    .title {
      font-size: 70px !important;
    }
    .sub-title {
      font-size: 75px !important;
      margin-top: 140px !important;
    }
    .welcome-btn{
      font-size: 26px !important;
      height: 60px !important;
      border-radius: 30px !important;
      padding: 0 33px 0 40px !important;
      img{
        width: 28px !important;
      }
    }
  }
}
</style>